<template>
  <div class="content">
    <div class="checkall flex-end">
      <!-- <div class="left flex-start">
        <input type="checkbox" v-model="checked" v-on:click="checkedAll" />
        <span class="title"> 全选</span>
      </div> -->

      <div class="export cp" @click="daochu">批量导出</div>
    </div>

    <table class="Datatable">
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checked" v-on:click="checkedAll" />
          </th>
          <th>反馈日期</th>
          <th>意见类型</th>
          <th>反馈人</th>
          <th>邮箱</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="total > 0">
        <tr v-for="(item,index) in tableData" :key="index">
          <td>
            <input type="checkbox" v-model="checkboxList" :value="item.adviseId" />
          </td>
          <td>{{ item.adviseTime ?setLocalTime( item.adviseTime):item.adviseTime }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.userName }}</td>
          <td>{{ item.userPhone }}</td>
          <td>{{ item.adviseContent }}</td>
          <td>
            <span class="ck cp" @click="searchDetail(item.adviseId)">查看</span>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="7">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import getUTCTime from '@/utils/tools/getUTCTime'
import file from '@/utils/tools/fileExport'

export default {
  data () {
    return {
      // currentPage: 1,
      // size: 10,
      checkboxList: [],
      checked: false,
      adviseTime: null,
      adviseType: null,
      userPhone: null

    }
  },
  computed: {
    tableData () {
      return this.$store.state.feedback.tableData
    },
    total () {
      return this.$store.state.feedback.total
    },
    currentPage: {
      get: function () {
        return this.$store.state.feedback.params.page + 1
      },
      set: function (newValue) {
        this.$store.commit('feedback/set_page', newValue)
      }
    },
    size: {
      get: function () {
        return this.$store.state.feedback.params.size
      },
      set: function (newValue) {
        this.$store.commit('feedback/set_size', newValue)
      }
    }
  },
  created () {
    this.getInfo()
  },

  methods: {
    handleCurrentChange (val) {
      this.$store.commit('feedback/set_page', val)
      this.getInfo()
    },
    handleSizeChange (size) {
      this.$store.commit('feedback/set_size', size)
      this.getInfo()
    },
    checkedAll () {
      // console.log(this.checked)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.tableData.forEach((item) => {
          this.checkboxList.push(item.adviseId)
        })
      }
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    searchDetail (id) {
      // alert(id)
      sessionStorage.setItem('id', id)
      this.$router.push({
        path: '/feedbackdetail'
      })
    },
    getInfo () {
      this.$store.dispatch('feedback/getTableData').then(res => {
        // console.log(res.data)
      })
    },
    daochu () {
      if (this.checkboxList.length !== 0) {
        const listId = this.checkboxList.join(',')
        const timeZone = -getUTCTime.getUTCTime(new Date())
        this.$store.dispatch('feedback/DaoChu', { listId, timeZone }).then(res => {
          file.fileExport(res.data, '反馈表')
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err,
            duration: 1000
          })
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先勾选',
          duration: 1000
        })
      }
    }

  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        // console.log(this.checkboxList)
        if (this.checkboxList.length === this.tableData.length && this.checkboxList.length !== 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    },
    tableData: {
      handler: function (val, oldVal) {
        this.checked = false
        this.checkboxList = []
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 674px;
  padding: 0 24px;
  background-color: #fff;
  padding-top: 1px;
  margin-top: 20px;
  border-radius: 8px;
  position: relative;
  padding-bottom: 120px;

  table {
    // width: 100%;
    // border-collapse: collapse;
    // table-layout: fixed;

    th,
    td {
      // border: 1px solid #e6e9f0;
      // text-align: center;
      // height: 60px;
      // line-height: 60px;
      // color: #1f2e4d;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 218px;
      }
      &:nth-child(3) {
        width: 158px;
      }
      &:nth-child(4) {
        width: 158px;
      }
      &:nth-child(5) {
        width: 198px;
      }
      &:nth-child(6) {
        width: 438px;
      }
    }
    // thead {
    //   tr {
    //     background-color: #f7f9fc;
    //     color: #3d4966;
    //   }
    // }
    // tbody {
    //   tr:hover {
    //     background-color: #f7f9fc;
    //   }
    // }
  }
  // input[type="checkbox"] {
  //   width: 18px;
  //   height: 18px;
  //   opacity: 1;
  //   border: 1px solid #d7dbe0;
  //   border-radius: 4px;
  // }
}
</style>
